<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <title>Title</title>

    <style>
        .active-selector:active {
            background-color: green;
            color: pink;
        }

        .hover-selector:hover {
            background-color: green;
            color: pink;
        }

        .link-selector-div > .link-selector:link {
            color: red;
        }

        .focus-selector-div .focus-selector > span:focus,
        .focus-selector-div .focus-selector > input[type="text"]:focus,
        .focus-selector-div .focus-selector > input[type="button"]:focus {
            background-color: orange;
            color: pink;
        }

        .focus-selector-div > .focus-selector:focus {
            background-color: red;
        }

        .focus-selector-div > .focus-selector:focus-within {
            background-color: gray;
        }

        .visited-selector:visited {
            color: green;
        }

        .link-any-selector-div > .link-any-selector:any-link {
            color: green;
        }

        .local-link-selector-div > a:local-link {
            color: pink;
        }

        .enabled-selector-div > .enabled-selector:enabled, .enabled-selector > input[type='text']:enabled,
        .enabled-selector-div > .enabled-selector:enabled, .enabled-selector > input[type="radio"]:enabled,
        .enabled-selector-div > .enabled-selector:enabled, .enabled-selector > input[type="checkbox"]:enabled {
            box-shadow: 0 0 0 3px red;
            background: skyblue;
        }

        .disabled-selector-div > .disabled-selector:disabled, .disabled-selector > input[type='text']:disabled,
        .disabled-selector-div > .disabled-selector:disabled, .disabled-selector > input[type="file"]:disabled,
        .disabled-selector-div > .disabled-selector:disabled, .disabled-selector > input[type="radio"]:disabled,
        .disabled-selector-div > .disabled-selector:disabled, .disabled-selector > input[type="checkbox"]:disabled {
            box-shadow: 0 0 0 3px orange;
            background: pink;
        }

        .autofill-selector:-webkit-autofill {
            border: 5px solid orange;
        }

        .autofill-selector:autofill {
            border: 5px solid orange;
        }

        .blank-selector-div > .blank-selector:blank {
            border: pink 2px solid;
        }

        .checked-selector-div > .checked-selector > input[type="radio"]:checked {
            box-shadow: 0 0 0 3px green;
        }

        .checked-selector-div > .checked-selector > input[type="checkbox"]:checked {
            box-shadow: 0 0 0 3px green;
        }

        .checked-selector-div > .checked-selector > option:checked {
            color: red;
        }

        .default-selector-div > .default-selector > input[type="radio"]:default,
        .default-selector-div > .default-selector > input[type="checkbox"]:default,
        .default-selector-div > .default-selector > option:default {
            color: red;
            box-shadow: 0 0 0 3px green;
        }

        .indeterminate-selector > div > input:indeterminate + label {
            background: green;
        }

        .indeterminate-selector > progress:indeterminate {
            box-shadow: 0 0 10px 1px red;
        }

        .in-range-selector:in-range {
            background-color: pink;
        }

        .out-of-range-selector:out-of-range {
            background-color: pink;
        }

        .valid-selector-div > .valid-selector:valid {
            border: 5px solid pink;
        }

        .valid-selector-div > .valid-selector > input:valid {
            background-color: pink;
        }

        .invalid-selector-div > .invalid-selector:invalid {
            border: 5px solid pink;
        }

        .invalid-selector-div > .invalid-selector > input:invalid {
            background-color: pink;
        }

        .required-selector-div > .required-selector:required {
            border: 3px dashed pink;
        }

        .optional-selector-div > .optional-selector:optional {
            border: 3px dashed pink;
        }

        .placeholder-shown-selector-div > .placeholder-shown-selector:placeholder-shown {
            border: 3px solid pink;
        }

        .playing-selector-div > .playing-selector:playing {
            border: pink 10px solid;
        }

        .paused-selector-div > .paused-selector:paused {
            border: pink 10px solid;
        }

        .picture-in-picture-selector-div > .picture-in-picture-selector:picture-in-picture {
            box-shadow: 0 0 0 10px red;
            border: pink 10px solid;
        }

        .empty-selector-div > .empty-selector {
            height: 20px;
            width: 400px;
            background-color: darkgray; /*灰色*/
            margin-top: 5px;
        }

        .empty-selector-div > .empty-selector:empty {
            border: red solid 3px;
        }

        .only-child-selector > div span:only-child {
            color: pink;
        }

        .only-of-type-selector > div span:only-of-type {
            color: pink;
        }

        .first-child-selector-div > .first-child-selector > p:first-child {
            color: pink;
            background-color: black;
            padding: 5px;
        }

        .last-child-selector-div > .last-child-selector > p:last-child {
            color: pink;
            background-color: black;
            padding: 5px;
        }

        .first-of-type-selector-div > .first-of-type-selector > p:first-of-type {
            color: pink;
            background-color: black;
            padding: 5px;
        }

        .last-of-type-selector-div > .last-of-type-selector > p:last-of-type {
            color: pink;
            background-color: black;
            padding: 5px;
        }

        .nth-child-selector-div > .nth-child-selector1 > div:nth-child(3) { /*nth-child(0n+3)*/
            color: pink;
        }

        .nth-child-selector-div > .nth-child-selector2 > div:nth-child(-n+3) { /*前三*/
            color: pink;
        }

        .nth-child-selector-div > .nth-child-selector3 > div:nth-child(2n+1) { /*odd*/
            color: pink;
        }

        .nth-child-selector-div > .nth-child-selector4 > div:nth-child(2n) { /*even*/
            color: pink;
        }

        .nth-child-selector-div > .nth-child-selector5 > div:nth-child(n) { /*所有*/
            color: pink;
        }

        .nth-child-selector-div > .nth-child-selector6 > span:nth-child(1) {
            color: pink;
        }

        .nth-last-child-selector-div > .nth-last-child-selector1 > div:nth-last-child(3) { /*nth-last-child(0n+3)*/
            color: pink;
        }

        .nth-last-child-selector-div > .nth-last-child-selector2 > div:nth-last-child(-n+3) { /*后三*/
            color: pink;
        }

        .nth-last-child-selector-div > .nth-last-child-selector3 > div:nth-last-child(2n+1) { /*odd*/
            color: pink;
        }

        .nth-last-child-selector-div > .nth-last-child-selector4 > div:nth-last-child(2n) { /*even*/
            color: pink;
        }

        .nth-last-child-selector-div > .nth-last-child-selector5 > div:nth-last-child(n) { /*所有*/
            color: pink;
        }

        .nth-last-child-selector-div > .nth-last-child-selector6 > span:nth-last-child(1) {
            color: pink;
        }

        .nth-of-type-selector-div > .nth-of-type-selector1 > div:nth-of-type(3) {
            color: pink;
        }

        .nth-of-type-selector-div > .nth-of-type-selector2 > div:nth-of-type(-n+3) { /*前三*/
            color: pink;
        }

        .nth-of-type-selector-div > .nth-of-type-selector3 > div:nth-of-type(2n+1) { /*odd*/
            color: pink;
        }

        .nth-of-type-selector-div > .nth-of-type-selector4 > div:nth-of-type(2n) { /*even*/
            color: pink;
        }

        .nth-of-type-selector-div > .nth-of-type-selector5 > div:nth-of-type(n) { /*所有*/
            color: pink;
        }

        .nth-of-type-selector-div > .nth-of-type-selector6 > span:nth-of-type(1) {
            color: pink;
        }

        .nth-last-of-type-selector-div > .nth-last-of-type-selector1 > div:nth-last-child(3) { /*nth-last-child(0n+3)*/
            color: pink;
        }

        .nth-last-of-type-selector-div > .nth-last-of-type-selector2 > div:nth-last-child(-n+3) { /*后三*/
            color: pink;
        }

        .nth-last-of-type-selector-div > .nth-last-of-type-selector3 > div:nth-last-child(2n+1) { /*odd*/
            color: pink;
        }

        .nth-last-of-type-selector-div > .nth-last-of-type-selector4 > div:nth-last-child(2n) { /*even*/
            color: pink;
        }

        .nth-last-of-type-selector-div > .nth-last-of-type-selector5 > div:nth-last-child(n) { /*所有*/
            color: pink;
        }

        .nth-last-of-type-selector-div > .nth-last-of-type-selector6 > span:nth-last-child(1) {
            color: pink;
        }

        .nth-col-selector-div > table > tbody > tr > td {
            border: 1px solid gray;
            padding: 4px;
        }

        :nth-col(2n) {
            background-color: pink;
        }


        /*.is-selector-div > .is-selector1 > span,
        .is-selector-div > .is-selector2 > span,
        .is-selector-div > .is-selector3 > span {
            color: pink;
        }*/

        /*.is-selector-div > :is(.is-selector1, .is-selector2, .is-selector3) > span {
            color: pink;
        }*/

        .is-selector-div > :is(.is-selector1, .is-selector2, .is-selector3) > :is(.span1,.span2,.span3) {
            color: pink;
        }

        .not-selector-div > p:not(.not-selector1) { /*类名为not-selector-div的子元素中类名不为not-selector1的元素*/
            background-color: gray;
        }

        .not-selector-div > p:not(.not-selector2):not(.not-selector3) { /*类名为not-selector-div的子元素中类名不为not-selector2、也不为not-selector3的元素*/
            border: black 2px solid;
        }

        .not-selector-div > p:not(.not-selector2, .not-selector3) {
            color: pink;
        }

        .not-selector-div > p:not(p.not-selector2) {
            margin: 10px;
        }

        .has-selector > div > h1:has(+ h2) { /*该样式设置给下一个元素为h2的h1元素*/
            background-color: pink;
        }

        /*@page :first {
            margin-left: 50%;
            margin-top: 50%;
        }*/

        @page :left {
            margin-left: 50%;
            margin-top: 50%;
        }

        .lang-selector > div:lang(en) > q {
            quotes: '\201C' '\201D' '\2018' '\2019';
        }

        .lang-selector > div:lang(fr) > q {
            quotes: '« ' ' »';
        }

        .lang-selector > div:lang(de) > q {
            quotes: '»' '«' '\2039' '\203A';
        }

        .read-only-selector-div > .read-only-selector:read-only {
            background-color: pink;
        }

        .read-only-selector-div > .read-only-selector:-moz-read-only {
            background-color: pink;
        }

        .read-write-selector-div > .read-write-selector:read-write {
            background-color: pink;
        }

        .read-write-selector-div > .read-write-selector:-moz-read-write {
            background-color: pink;
        }

        /*:root {
            background: yellow;
        }*/
    </style>
  </head>
  <body style="padding: 100px 0px">
    <!--1.焦点相关-->
    <!--`:active`匹配被用户激活的元素，表示的是按下鼠标到松开鼠标这段时间，注意`:active`可能会被`:link`、`:visited`、 `:hover`覆盖，优先级为LVHA-->
    <div class="active-selector" style="cursor: pointer;width: 100px;border: #cccccc 1px solid">:active</div>
    <br><br><br>
    <!--`:hover`匹配被用户虚激活的元素，即鼠标移入的元素，注意在触摸屏幕上`:hover`失效-->
    <div class="hover-selector" style="cursor: pointer;width: 100px;border: #cccccc 1px solid">:hover</div>
    <br><br><br>
    <!--`:focus`匹配获取焦点的元素，当用户点击、触摸屏幕和按Tab键选择时都属于聚焦-->
    <!--`:focus-within`匹配元素自身获取焦点或其后代获取焦点的元素，不同于`focus`值匹配元素自身获取焦点的元素-->
    <div class="focus-selector-div" style="cursor: pointer;width: 200px">
      <form class="focus-selector">
        <span>:focus</span><br>

        <input type="text">

        <input type="button" value="按钮">
      </form>
    </div>
    <br><br><br>
    <!--`:visited`匹配被用户访问过的链接元素，注意由于隐私因素，`:visited`并不能修改所有样式-->
    <a class="visited-selector" style="cursor: pointer" href="https://www.qq.com">:visited</a>
    <br><br><br>
    <!--`:link`匹配未被用户点击过的拥有`href`属性的元素，被点击后则不会被`:link`匹配-->
    <div class="link-selector-div">
      <a class="link-selector" href="https://www.apple.com">:link-a</a><br>
      <a class="link-selector" href="#bottom">:link-a#</a><br>
      <a class="link-selector">:link-a-no-href</a>
    </div>
    <br><br><br>
    <!--`:any-link`匹配拥有`href`属性的元素，与`:link`的区别是元素即使被点击也被`:any-link`匹配到-->
    <div class="link-any-selector-div">
      <a class="link-any-selector" href="https://example.com">:link-a</a><br>
      <a class="link-any-selector" href="#">:link-a#</a><br>
      <a class="link-any-selector">:link-a-no-href</a>
    </div>
    <br><br><br>
    <!--`:local-link`匹配超链接`href`属性值为源锚点的元素，即`href`属性值与该文档自生URL匹配-->
    <div class="local-link-selector-div">
      <a href="#target">#到当前元素</a><br/>
      <a href="https://waidu.com">BaiDu</a><br/>
    </div>
    <br><br><br>
    <!--`:enabled`匹配被启用的元素，启用即能点击、能获取焦点、能选择-->
    <div class="enabled-selector-div">
      <div class="enabled-selector">
        <input type="text" placeholder="输入">
      </div>

      <div class="enabled-selector">
        <input type="radio" name="radio1" disabled>男
        <input type="radio" name="radio1">女
      </div>

      <div class="enabled-selector">
        <input type="checkbox" name="checkbox1">篮球
        <input type="checkbox" name="checkbox1" disabled>羽毛球
      </div>

      <select class="enabled-selector" multiple>
        <option>苹果</option>
        <option>梨子</option>
        <option>火龙果</option>
      </select>
    </div>
    <br><br><br>
    <!--`:disabled`匹配被禁用的元素，禁用即不能点击、不能获取焦点、不能选择-->
    <div class="disabled-selector-div">
      <div class="disabled-selector">
        <input type="text" placeholder="禁止输入" disabled>
        <input type="file" disabled>
      </div>

      <div class="disabled-selector">
        <input type="radio" name="radio1" checked disabled>男
        <input type="radio" name="radio1">女
      </div>

      <div class="disabled-selector">
        <input type="checkbox" name="checkbox1" disabled>篮球
        <input type="checkbox" name="checkbox1">羽毛球
      </div>

      <select class="disabled-selector" multiple disabled>
        <option>苹果</option>
        <option>梨子</option>
        <option>火龙果</option>
      </select>
    </div>
    <br><br><br>

    <!--2.表单相关-->
    <!--`:autofill`匹配`<input>`被浏览器自动填充时的元素-->
    <input class="autofill-selector" name="email" type="email" autocomplete="email">
    <br><br><br><br><br><br>
    <!--`:blank`匹配用户输入为空的输入框，如`<input>`和`<textarea>`，不兼容谷歌浏览器-->
    <div class="blank-selector-div">
      <input class="blank-selector" type="text">
      <textarea class="blank-selector"></textarea>
    </div>
    <br><br><br>
    <!--`:checked`匹配处于选中状态的`radio`、`checkbox`和`select`-->
    <div class="checked-selector-div">
      <div class="checked-selector">
        <input type="radio" name="radio1">男
        <input type="radio" name="radio1">女
      </div>

      <div class="checked-selector">
        <input type="checkbox" name="checkbox1">篮球
        <input type="checkbox" name="checkbox1">羽毛球
      </div>

      <select class="checked-selector">
        <option>苹果</option>
        <option>梨子</option>
        <option>火龙果</option>
      </select>
    </div>
    <br><br><br>
    <!--`:default`匹配默认选中的`radio`、`checkbox`和`select`元素-->
    <div class="default-selector-div">
      <div class="default-selector">
        <input type="radio" name="radio1" checked>男
        <input type="radio" name="radio1">女
      </div>

      <div class="default-selector">
        <input type="checkbox" name="checkbox1" checked>篮球
        <input type="checkbox" name="checkbox1" checked>羽毛球
      </div>

      <select class="default-selector" multiple>
        <option>苹果</option>
        <option selected>梨子</option>
        <option selected>火龙果</option>
      </select>
    </div>
    <br><br><br>
    <!--`:indeterminate`匹配表单中状态不确定的元素，包括`checkbox`、具有相同`name`且都未被选中的`radio`、不确定状态的`<progress>`-->
    <div class="indeterminate-selector">
      <div>
        <input type="radio" id="radio" name="radio">
        <label for="radio">单选框状态不确定</label>
      </div>

      <div>
        <input type="checkbox" id="checkbox">
        <label for="checkbox">复选框状态不确定</label>
      </div>

      <progress/>
    </div>
    <script>
        var inputs = document.getElementsByTagName("input");
        for (var i = 0; i < inputs.length; i++) {
            inputs[i].indeterminate = true;
        }
    </script>
    <br><br><br>
    <!--`:in-range`匹配当前值处于`<input>`元素的`min`和`max`范围之内的元素-->
    <input class="in-range-selector" type="number" placeholder="1 to 10" min="1" max="10" value="12">
    <br><br><br>
    <!--`:out-of-range`匹配当前值不处于`<input>`元素的`min`和`max`范围之内的元素-->
    <input class="out-of-range-selector" type="number" placeholder="1 to 10" min="1" max="10" value="12">
    <br><br><br>
    <!--`:valid`匹配通过验证的表单元素，若锚元素为`form`则需表单内所有元素通过验证-->
    <div class="valid-selector-div" style="width: 200px">
      <form class="valid-selector">
        URL:<input type="url"/>
        <br/><br/>
        Email Address:<input type="email" required/>
      </form>
    </div>
    <br><br><br>
    <!--`:invalid`匹配未通过验证的表单元素，若锚元素为`form`则需表单内所有元素通过验证-->
    <div class="invalid-selector-div" style="width: 200px">
      <form class="invalid-selector">
        URL:<input type="url"/>
        <br/><br/>
        Email Address:<input type="email" required/>
      </form>
    </div>
    <br><br><br>
    <!--`:required`匹配有`required`属性的`<input>`，`<select>`或`<textarea>`元素-->
    <div class="required-selector-div">
      <input class="required-selector" type="text" required><br>

      <textarea class="required-selector" required></textarea><br>

      <select class="required-selector" required>
        <option>香蕉</option>
        <option>苹果</option>
      </select>
    </div>
    <br><br><br>
    <!--`:optional`匹配没有`required`属性的`<input>`，`<select>`或`<textarea>`元素-->
    <div class="optional-selector-div">
      <input class="optional-selector" type="text"><br>

      <textarea class="optional-selector"></textarea><br>

      <select class="optional-selector">
        <option>香蕉</option>
        <option>苹果</option>
      </select>
    </div>
    <br><br><br>
    <!--`:placeholder-shown`匹配存在`placeholder`属性的`<input>`或`<textarea>`元素-->
    <div class="placeholder-shown-selector-div">
      <input class="placeholder-shown-selector" type="text" placeholder=""><br>
      <input class="placeholder-shown-selector" type="text" placeholder="请输入"><br>
      <textarea class="placeholder-shown-selector" placeholder=""></textarea><br>
      <textarea class="placeholder-shown-selector" placeholder="请输入"></textarea>
    </div>
    <br><br><br>

    <!--3.媒体相关-->
    <!--`:playing`匹配处于播放状态的媒体资源，谷歌浏览器暂未兼容-->
    <div class="playing-selector-div">
      <video class="playing-selector" controls style="height: 300px">
        <source src="img/mp4.mp4">
      </video>

      <br><br><br>

      <audio class="playing-selector" controls>
        <source src="img/mp3.mp3">
      </audio>
    </div>
    <br><br><br>
    <!--`:paused`匹配处于暂停状态的媒体资源，谷歌浏览器暂未兼容-->
    <div class="paused-selector-div">
      <video class="paused-selector" controls style="height: 300px">
        <source src="img/mp4.mp4">
      </video>

      <br><br><br>

      <audio class="paused-selector" controls>
        <source src="img/mp3.mp3">
      </audio>
    </div>
    <br><br><br>
    <!--`:picture-in-picture`匹配处于画中画模式的元素-->
    <div class="picture-in-picture-selector-div">
      <video class="picture-in-picture-selector" controls style="width: 300px">
        <source src="img/mp4.mp4">
      </video>
    </div>
    <br><br><br>

    <!--4.树结构相关-->
    <!--`:empty`匹配没有子元素的元素，子元素只可是元素节点或非注释文本-->
    <div class="empty-selector-div">
      <div class="empty-selector">
        <div>存在子元素</div>
      </div>

      <div class="empty-selector">
        存在文本
      </div>

      <div class="empty-selector">
        <!--注释文本-->
      </div>

      <div class="empty-selector"><!--注释文本--></div>
    </div>
    <br><br><br>
    <!--`:only-child`匹配没有任何兄弟元素的元素，等效的选择器可以写成`:first-child:last-child`或者`:nth-child(1):nth-last-child(1)`，前者的优先级会低一点-->
    <div class="only-child-selector">
      <div>
        <span>span</span>
      </div>

      <div>
        <span>span</span>
        <span>span外<span>{span内}</span></span>
      </div>
    </div>
    <br><br><br>
    <!--`:only-of-type`匹配没有其他同类型的兄弟元素的元素-->
    <div class="only-of-type-selector">
      <div>
        <span>span</span>
        <a href="#">a</a>
      </div>

      <div>
        <span>span</span>
        <span>span外<span>{span内}</span></span>
        <a href="#">a</a>
      </div>
    </div>
    <br><br><br>
    <!--`:first-child`匹配锚元素为第一个孩子节点的元素-->
    <div class="first-child-selector-div" style="display: flex;column-gap: 10px">
      <div class="first-child-selector" style="border: 3px skyblue solid">
        <h1>第一组h1</h1>
        <p>第一组p</p>
        <p>第一组p</p>
      </div>

      <div class="first-child-selector" style="border: 3px skyblue solid">
        <p>第二组p</p>
        <p>第二组p</p>
        <h1>第二组h1</h1>
      </div>

      <div class="first-child-selector" style="border: 3px skyblue solid">
        <p>第三组p</p>
        <h1>第三组h1</h1>
        <p>第三组p</p>
      </div>
    </div>
    <br><br><br>
    <!--`:last-child`匹配锚元素为最后一个孩子节点的元素-->
    <div class="last-child-selector-div" style="display: flex;column-gap: 10px">
      <div class="last-child-selector" style="border: 3px skyblue solid">
        <p>第一组p</p>
        <p>第一组p</p>
        <h1>第一组h1</h1>
      </div>

      <div class="last-child-selector" style="border: 3px skyblue solid">
        <h1>第二组h1</h1>
        <p>第二组p</p>
        <p>第二组p</p>
      </div>

      <div class="last-child-selector" style="border: 3px skyblue solid">
        <p>第三组p</p>
        <h1>第三组h1</h1>
        <p>第三组p</p>
      </div>
    </div>
    <br><br><br>
    <!--``:first-of-type`匹配孩子节点中的第一个锚元素-->
    <div class="first-of-type-selector-div" style="display: flex;column-gap: 10px">
      <div class="first-of-type-selector" style="border: 3px skyblue solid">
        <h1>第一组h1</h1>
        <h1>第一组h1</h1>
        <h1>第一组h1</h1>
        <p>第一组p</p>
        <p>第一组p</p>
      </div>

      <div class="first-of-type-selector" style="border: 3px skyblue solid">
        <p>第二组p</p>
        <p>第二组p</p>
        <h1>第二组h1</h1>
      </div>
    </div>
    <br><br><br>
    <!--`:last-of-type`匹配孩子节点中的最后一个锚元素-->
    <div class="last-of-type-selector-div" style="display: flex;column-gap: 10px">
      <div class="last-of-type-selector" style="border: 3px skyblue solid">
        <p>第一组p</p>
        <p>第一组p</p>
        <h1>第一组h1</h1>
        <h1>第一组h1</h1>
        <h1>第一组h1</h1>
      </div>

      <div class="last-of-type-selector" style="border: 3px skyblue solid">
        <h1>第二组h1</h1>
        <p>第二组p</p>
        <p>第二组p</p>
      </div>
    </div>
    <br><br><br>
    <!--`:nth-child(an+b)`首先找到当前元素所有的兄弟元素，然后选择与参数匹配的元素，其编号从1开始，**特别注意`an`必须写在`b`前面**-->
    <div class="nth-child-selector-div">
      <div class="nth-child-selector1" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-child-selector2" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-child-selector3" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-child-selector4" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-child-selector5" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-child-selector6" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
    </div>
    <br><br><br>
    <!--`nth-last-child(an+b)`首先找到当前元素所有的兄弟元素，然后从后往前选择与参数匹配的元素，编号1是最后一个元素-->
    <div class="nth-last-child-selector-div">
      <div class="nth-last-child-selector1" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-last-child-selector2" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-last-child-selector3" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-last-child-selector4" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-last-child-selector5" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
      <div class="nth-last-child-selector6" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
        <div>8</div>
      </div>
    </div>
    <br><br><br>
    <!--`:nth-of-type(an+b)`首先找到与当前锚元素相同的所有兄弟元素，然后选择与参数匹配的元素，其编号从1开始，且编号在其兄弟元素间可能非连续-->
    <div class="nth-of-type-selector-div">
      <div class="nth-of-type-selector1" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-of-type-selector2" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-of-type-selector3" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-of-type-selector4" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-of-type-selector5" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-of-type-selector6" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
    </div>
    <br><br><br>
    <!--`:nth-last-of-type(an+b)`首先找到与当前锚元素相同的所有兄弟元素，然后从后往前选择与参数匹配的元素，其编号1是最后一个匹配的元素，且编号在其兄弟元素间可能非连续-->
    <div class="nth-last-of-type-selector-div">
      <div class="nth-last-of-type-selector1" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-last-of-type-selector2" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-last-of-type-selector3" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-last-of-type-selector4" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-last-of-type-selector5" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
      <div class="nth-last-of-type-selector6" style="display: flex;column-gap: 10px">
        <div>1</div>
        <div>2</div>
        <span>(3.该元素不参与编号)</span>
        <div>3</div>
        <div>4</div>
        <div>5</div>
        <div>6</div>
        <div>7</div>
      </div>
    </div>
    <br><br><br>
    <!--`:nth-col(an+b)`为表和网格设计，选择与参数匹配的列，`:nth-last-col(an+b)`则从后往前选择与参数匹配的列，谷歌浏览器暂未兼容-->
    <div class="nth-col-selector-div">
      <table class="nth-col-selector1">
        <tr>
          <td>one</td>
          <td>two</td>
          <td>three</td>
          <td>four</td>
        </tr>
        <tr>
          <td>one</td>
          <td>two</td>
          <td>three</td>
          <td>four</td>
        </tr>
      </table>
    </div>
    <br><br><br>

    <!--5.函数相关-->
    <!--通常选择器列表中存在某个选择器无效时将导致整个选择器都被视为无效，但可容错选择器列表则不会导致整个选择器被视为无效，其他书写正确的选择器仍然起作用-->
    <!--`:is()`匹配参数**可容错**选择器列表中任意选择器匹配的元素，该函数式伪类可简化选择器列表，但不可选择伪元素-->
    <!--`:where()`匹配参数**可容错**选择器列表中任意选择器匹配的元素，不同于`:is()`的是`:where()`的优先级总是为0，而`:is()`的优先级又参数列表中优先级最高的选择器决定-->
    <div class="is-selector-div">
      <div class="is-selector1">
        <span class="span1">is选择器1</span>
      </div>

      <div class="is-selector2">
        <span class="span2">is选择器2</span>
      </div>

      <div class="is-selector3">
        <span class="span3">is选择器3</span>
      </div>
    </div>
    <br><br><br>
    <!--`:not()`匹配不存在于参数选择器列表中任意选择器匹配的元素的其他元素，其他元素包括`<html>`和`<body>`，用于防止特定元素被选中。该函数式伪类的参数是不可容错的，但可通过`:is(:not(.foo), :not(:invalid-pseudo-class))`方式解决该问题-->
    <div class="not-selector-div">
      <p class="not-selector1">类名not-selector1</p>
      <p class="not-selector2">类名not-selector2</p>
      <p class="not-selector3">类名not-selector3</p>
      <p class="not-selector4">类名not-selector4</p>
    </div>
    <br><br><br>
    <!--`:has()`通过参数**可容错**选择器列表匹配父元素或先前的兄弟元素，该函数式伪类参数不能是自己且不能是伪元素-->
    <div class="has-selector" style="display: flex;column-gap: 10px">
      <div style="border: green solid 1px">
        <h1>1.这是标题一</h1>
        <p>1.这是p标签</p>
      </div>

      <div style="border: green solid 1px">
        <h1>1.这是标题一</h1>
        <h2>1.这是h2标签</h2>
      </div>
    </div>
    <br><br><br>

    <!--6.打印相关-->
    <!--`:first`配合`@page`匹配打印文件时第一页的样式-->
    <div class="first-selector">
      <p>第一页</p>
      <p>第二页</p>
      <button class="first-selector-buttom">打印</button>
    </div>
    <script>
        document.querySelector(".first-selector-buttom").onclick = function () {
            window.print()
        }
    </script>
    <br><br><br>

    <!--7.其他-->
    <!--`:lang`基于语言匹配元素-->
    <div class="lang-selector">
      <div lang="en"><q>This English quote has a <q>nested</q> quote inside.</q></div>
      <div lang="fr"><q>This French quote has a <q>nested</q> quote inside.</q></div>
      <div lang="de"><q>This German quote has a <q>nested</q> quote inside.</q></div>
    </div>
    <br><br><br>
    <!--`:read-only`匹配不可被用户编辑的元素-->
    <div class="read-only-selector-div">
      <input class="read-only-selector" type="text" value="可编辑">
      <input class="read-only-selector" type="text" value="不可编辑" readonly>
      <p class="read-only-selector" style="width: 345px">不可编辑</p>
      <p class="read-only-selector" contenteditable="true" style="width: 345px">可编辑</p>
    </div>
    <br><br><br>
    <!--`:read-write`匹配可被用户编辑的元素-->
    <div class="read-write-selector-div">
      <input class="read-write-selector" type="text" value="可编辑">
      <input class="read-write-selector" type="text" value="不可编辑" readonly>
      <p class="read-write-selector" style="width: 345px">不可编辑</p>
      <p class="read-write-selector" contenteditable="true" style="width: 345px">可编辑</p>
    </div>
    <br><br><br>
    <!--`:root`匹配文档树根元素，HTML中文档树根元素为`<html>`，相较`html`元素选择器优先级更高--><!--====直接看CSS====-->
    <!--`:scope`在样式表中使用时相当于`:root`，当在DOM API中使用时则匹配调用API的元素，可用于获取已检索到的的直接后代元素-->
    <div class="scope-selector">
      <div id="context">
        <div id="element-1">
          <div id="element-1.1"></div>
          <div id="element-1.2"></div>
        </div>
        <div id="element-2">
          <div id="element-2.1"></div>
        </div>
      </div>

      <p>
        所选元素id :<span id="results"></span>
      </p>
    </div>
    <script>
        var context = document.getElementById('context');
        var selected = context.querySelectorAll(':scope > div');//scope相当于id=context的元素

        document.getElementById('results').innerHTML = Array.prototype.map.call(selected, function (element) {
            return '#' + element.getAttribute('id');
        }).join(', ');
    </script>
  </body>
</html>